<template>
  <el-dialog
    :visible.sync="isVisible"
    title="告警设置"
    width="780px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="onClose"
  >
    <div class="dialog-container">
      <el-form
        ref="settingForm"
        :model="settings"
        :rules="settingRules"
        label-width="140px"
      >
        <el-form-item label="紫外光子数:" prop="uvPhotonCount">
          <el-input
            v-model="settings.uvPhotonCount"
            placeholder="请输入紫外光子数"
          />
        </el-form-item>
        <el-form-item label="红外温度(℃):" prop="irTemperature">
          <el-input
            v-model="settings.irTemperature"
            placeholder="请输入红外温度"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSave">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateCameraAlarm } from '@/api/camera';
export default {
  name: 'SettingDialog',
  data() {
    return {
      isVisible: false,
      settings: {
        uvPhotonCount: 0,
        irTemperature: 0,
      },
      settingRules: {
        uvPhotonCount: [
          {
            required: true,
            message: '请输入紫外光子数',
            trigger: ['blur', 'change'],
          },
        ],
        irTemperature: [
          {
            required: true,
            message: '请输入红外温度',
            trigger: ['blur', 'change'],
          },
        ],
      },
    };
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
  },
  methods: {
    /**
     * 显示设置对话框
     */
    show() {
      this.isVisible = true;
      this.settings = {
        uvPhotonCount: this.currentVideo.irPhotons,
        irTemperature: this.currentVideo.irTemperature,
      };
    },
    /**
     * 隐藏
     */
    onClose() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.settingForm.resetFields();
    },
    /**
     * 取消
     */
    onCancel() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.settingForm.resetFields();
    },
    /**
     * 保存
     */
    onSave() {
      this.$refs.settingForm.validate(async (valid) => {
        if (!valid) {
          return false;
        } else {
          const param = {
            id: this.currentVideo.id,
            ir_photons: this.settings.uvPhotonCount,
            ir_temperature: this.settings.irTemperature,
          };
          const res = await updateCameraAlarm(param);
          if (res.code === 200) {
            this.$message.success('修改成功');
            this.$emit('on-refresh', this.currentVideo.id);
            this.isVisible = false;
          } else {
            this.$message.error('修改失败');
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 20px;
}
</style>
